<template>
	<view class="content">
		<view class="emissiondata">
			<view class="emissiondata_l">用能排放数据</view>
			<view class="emissiondata_r" @click="handleGoAllData">全部数据</view>
		</view>
		<!-- 日历 -->
		<view class="calendar">
			<uni-calendar 
			:insert="true"
			:showMonth="false"
			:start-date="'2024-1-1'"
			:end-date="'2024-1-31'"
			 />
		</view>
		<!-- 看板 -->
		<view class="board">
			<view class="boardItem">
				<view class="boardItem_t">
					<view class="board_logo">
						<view>
							<image src="https://txr001.zthj.net/qingdie/Group%2013549.png" mode=""></image>
						</view>
						<view>看板1</view>
					</view>
					<view class="board_return">
						<view @click="handleBoarddetailsBtn">查看详情</view>
						<view>
							<image src="https://txr001.zthj.net/qingdie/Frame.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="board_Text">
					<view class="board_Text_t">
						<view class="board_Text_details">
							<view>用电(KW/H)</view>
							<view>2900</view>
							<view>
								<view>同比：</view>
								<view class="rise">+10%</view>
								<view>
									<image src="https://txr001.zthj.net/qingdie/Frame1.png" mode=""></image>
								</view>
							</view>
							<view>上月：2610</view>
						</view>
						<view class="linebetween"></view>
						<view class="board_Text_details">
							<view>用水(吨)</view>
							<view>2900</view>
							<view>
								<view>同比：</view>
								<view class="decline">-10%</view>
								<view>
									<image src="https://txr001.zthj.net/qingdie/Frame2.png" mode=""></image>
								</view>
							</view>
							<view>上月：2610</view>
						</view>
						<view class="linebetween"></view>
						<view class="board_Text_details">
							<view>用煤(10^4NM³)</view>
							<view>2900</view>
							<view>
								<view>同比：</view>
								<view>+10%</view>
								<view>
									<image src="https://txr001.zthj.net/qingdie/Frame1.png" mode=""></image>
								</view>
							</view>
							<view>上月：2610</view>
						</view>
					</view>
					<view class="crosswiseline"></view>
					<view class="board_Text_t">
						<view class="board_Text_details">
							<view>用气(10^4NM³)</view>
							<view>2900</view>
							<view>
								<view>同比：</view>
								<view class="rise">+10%</view>
								<view>
									<image src="https://txr001.zthj.net/qingdie/Frame1.png" mode=""></image>
								</view>
							</view>
							<view>上月：2610</view>
						</view>
						<view class="linebetween"></view>
						<view class="board_Text_details">
							<view>用油(10^4NM³)</view>
							<view>2900</view>
							<view>
								<view>同比：</view>
								<view>+10%</view>
								<view>
									<image src="https://txr001.zthj.net/qingdie/Frame1.png" mode=""></image>
								</view>
							</view>
							<view>上月：2610</view>
						</view>
						<view class="linebetween"></view>
						<view class="board_Text_details board_set_data" @click="handleCompileData">
							<view>
								<image src="https://txr001.zthj.net/qingdie/Frame3.png" mode=""></image>
							</view>
							<view>编辑数据</view>
						</view>
					</view>
				</view>
			</view>
			<view class="boardItem">
				<view class="boardItem_t">
					<view class="board_logo">
						<view>
							<image src="https://txr001.zthj.net/qingdie/Group%2013549.png" mode=""></image>
						</view>
						<view>看板2</view>
					</view>
					<view class="board_return">
						<view>查看详情</view>
						<view>
							<image src="https://txr001.zthj.net/qingdie/Frame.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="board_Text">
					<view class="board_Text_t">
						<view class="board_Text_details">
							<view>用电(KW/H)</view>
							<view>2900</view>
							<view>
								<view>同比：</view>
								<view class="rise">+10%</view>
								<view>
									<image src="https://txr001.zthj.net/qingdie/Frame1.png" mode=""></image>
								</view>
							</view>
							<view>上月：2610</view>
						</view>
						<view class="linebetween"></view>
						<view class="board_Text_details">
							<view>用水(吨)</view>
							<view>2900</view>
							<view>
								<view>同比：</view>
								<view class="decline">-10%</view>
								<view>
									<image src="https://txr001.zthj.net/qingdie/Frame2.png" mode=""></image>
								</view>
							</view>
							<view>上月：2610</view>
						</view>
						<view class="linebetween"></view>
						<view class="board_Text_details">
							<view>用煤(10^4NM³)</view>
							<view>2900</view>
							<view>
								<view>同比：</view>
								<view>+10%</view>
								<view>
									<image src="https://txr001.zthj.net/qingdie/Frame1.png" mode=""></image>
								</view>
							</view>
							<view>上月：2610</view>
						</view>
					</view>
					<view class="crosswiseline"></view>
					<view class="board_Text_t">
						<view class="board_Text_details">
							<view>用气(10^4NM³)</view>
							<view>2900</view>
							<view>
								<view>同比：</view>
								<view class="rise">+10%</view>
								<view>
									<image src="https://txr001.zthj.net/qingdie/Frame1.png" mode=""></image>
								</view>
							</view>
							<view>上月：2610</view>
						</view>
						<view class="linebetween"></view>
						<view class="board_Text_details">
							<view>用油(10^4NM³)</view>
							<view>2900</view>
							<view>
								<view>同比：</view>
								<view>+10%</view>
								<view>
									<image src="https://txr001.zthj.net/qingdie/Frame1.png" mode=""></image>
								</view>
							</view>
							<view>上月：2610</view>
						</view>
						<view class="linebetween"></view>
						<view class="board_Text_details board_set_data">
							<view>
								<image src="https://txr001.zthj.net/qingdie/Frame3.png" mode=""></image>
							</view>
							<view>编辑数据</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- btn -->
		<view class="setBtn">
			<view class="addkanban" @click="handleAddboard">
				<view>
					<image src="https://txr001.zthj.net/qingdie/Group%2013546.png" mode=""></image>
				</view>
				<view>添加看板</view>
			</view>
			<view class="addkanban verification" @click="handleverificationBtn">
				<view>
					<image src="https://txr001.zthj.net/qingdie/Frame4.png" mode=""></image>
				</view>
				<view>数据核验</view>
			</view>
			<view class="addkanban Intelligentize">
				<view>
					<image src="https://txr001.zthj.net/qingdie/Frame5.png" mode=""></image>
				</view>
				<view @click="handleIncorrectReturn">数据填报</view>
			</view>
		</view>
		<view class="aaa"></view>
		<!-- 添加看板弹窗 -->
		<uni-popup ref="board" type="center">
			<view class="boardPopup">
				<view>添加看板</view>
				<view></view>
				<view>看板名称</view>
				<view>
					<input type="text" placeholder="请输入看板名称">
				</view>
				<view>
					<view @click="handleCancelboard">取消</view>
					<view>确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 数据核验 -->
		<uni-popup ref="verification" type="center">
			<view class="verify">
				<view>选择看板 (单选)</view>
				<view></view>
				<view class="setCheckbox">
					<uni-data-checkbox selectedColor="#2FCDB1" mode="list" v-model="radio" :localdata="sex"></uni-data-checkbox>
				</view>
				<view>
					<view @click="handleCancelverify">取消</view>
					<view @click="handleVerificationConfirm">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 编辑数据 -->
		<uni-popup ref="compileData" type="center">
			<view class="compileData">
				<view>编辑数据</view>
				<view></view>
				<view class="compileBox">
					<view class="compileBoxItem" v-for="item in 3">
						<view>数据名称</view>
						<view>
							<view>
								<input type="text" placeholder="请输入">
							</view>
							<view>
								<image src="https://txr001.zthj.net/qingdie/Frame11.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="addCompileBoxItem">
					<view class="">
						<view>
							<image src="https://txr001.zthj.net/qingdie/Group%2013546.png" mode=""></image>
						</view>
						<view>新增数据</view>
					</view>
				</view>
				<view class="setcompileBtn">
					<view @click="handleCloseCompile">取消</view>
					<view>确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio: 0,
				sex: [{
					text: '看板1',
					value: 0
				}, {
					text: '看板2',
					value: 1
				}]
			}
		},
		onLoad() {
			
		},
		methods:{
			// 跳转全部数据
			handleGoAllData(){
				uni.navigateTo({
					url:"./allData"
				})
			},
			// 添加看板
			handleAddboard(){
				 this.$refs.board.open('center')
			},
			// 关闭添加看板
			handleCancelboard(){
				this.$refs.board.close()
			},
			// 数据核验
			handleverificationBtn(){
				this.$refs.verification.open('center')
			},
			// 数据核验确定btn
			handleVerificationConfirm(){
				uni.navigateTo({
					url:"/subpackage/pages/record/verification"
				})
			},
			// 关闭数据核验
			handleCancelverify(){
				this.$refs.verification.close()
			},
			// 查看详情btn
			handleBoarddetailsBtn(){
				uni.navigateTo({
					url:"/subpackage/pages/record/boarddetails"
				})
			},
			// 编辑数据弹出层
			handleCompileData(){
				this.$refs.compileData.open('center')
			},
			// 关闭编辑数据弹出层
			handleCloseCompile(){
				this.$refs.compileData.close()
			},
			// 数据填报
			handleIncorrectReturn(){
				// uni.navigateTo({
				// 	url:"/subpackage/pages/record/incorrect"
				// })
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>

<style scoped lang="less">
	.aaa{
		height: 10rpx;
	}
	.content{
		width: 750rpx;
		height: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
	}
	.emissiondata{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		font-family: "PingFang SC-Medium";
		.emissiondata_l{
			font-size: 32rpx;
			font-weight: 700;
		}
		.emissiondata_r{
			font-size: 24rpx;
			border-bottom: 2rpx solid #010101;
		}
	}
	.calendar{
		width: 686rpx;
		margin-top: 30rpx;
	}
	// 日历组件样式穿透
	/deep/.uni-calendar-item__weeks-box{
		width:80rpx !important;
		height: 80rpx !important;
		border-radius: 50% !important;
	}
	/deep/.uni-calendar__content{
		border-radius: 48rpx;
	}
	// 看板
	.board{
		.boardItem{
			width: 686rpx;
			height: 586rpx;
			margin-top: 30rpx;
			background-color: #fff;
			border-radius: 48rpx;
		}
		.boardItem_t{
			width: 100%;
			height: 100rpx;
			background: linear-gradient(135deg, #20CCAD 0%, #15B699 100%);
			border-radius: 48rpx 48rpx 0 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			color: #fff;
			.board_logo{
				display: flex;
				align-items: center;
				box-sizing: border-box;
				>view:nth-child(1){
					width: 48rpx;
					height: 48rpx;
					>image{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				>view:nth-child(2){
					height: 48rpx;
					font-size: 34rpx;
					font-family: "PingFang SC";
					font-weight: 500;
					color: #FFFFFF;
					margin-left: 10rpx;
					line-height: 48rpx;
				}
			}
			.board_return{
				display: flex;
				align-items: center;
				box-sizing: border-box;
				>view:nth-child(1){
					font-size: 26rpx;
					font-family: "PingFang SC";
					font-weight: 500;
					color: #FFFFFF;
					height: 34rpx;
					line-height: 34rpx;
				}
				>view:nth-child(2){
					width: 34rpx;
					height: 34rpx;
					margin-left: 5rpx;
					>image{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.board_Text{
			width: 100%;
			height: 486rpx;
			box-sizing: border-box;
			padding: 30rpx;
			.board_Text_t{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.board_Text_details{
					width: 207rpx;
					text-align: center;
					font-family: "PingFang SC";
					color: #333333;
					>view:nth-child(1){
						font-size: 24rpx;
						font-weight: 400;
						line-height: 28rpx;
					}
					>view:nth-child(2){
						font-size: 40rpx;
						font-weight: 600;
						line-height: 47rpx;
						margin: 20rpx 0;
					}
					>view:nth-child(3){
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20rpx;
						font-weight: 400;
						.rise{
							color: #DC5128;
						}
						.decline{
							color: #0CB596;
						}
						>view:nth-child(3){
							width: 20rpx;
							height: 24rpx;
							margin-left: 5rpx;
							>image{
								display: block;
								width: 100%;
								height: 100%;
							}
						}
					}
					>view:nth-child(4){
						margin-top: 20rpx;
						font-size: 20rpx;
						font-weight: 400;
						line-height: 23rpx;
					}
				}
				.board_set_data{
					text-align: center;
					>view:nth-child(1){
						height: 48rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						>image{
							display: block;
							width: 48rpx;
							height: 100%;
						}
					}
					>view:nth-child(2){
						font-size: 24rpx;
						font-family: "PingFang SC";
						font-weight: 500;
						color: #333333;
						line-height: 28rpx;
					}
				}
				.linebetween{
					width: 2rpx;
					height: 100rpx;
					background: #E6E6E6;
				}
			}
			.crosswiseline{
				width: 622rpx;
				height: 2rpx;
				background: #E6E6E6;
				margin: 35rpx 0;
			}
		}
	}
	.setBtn{
		margin-top: 40rpx;
		.addkanban{
			width: 686rpx;
			height: 80rpx;
			background: #24458E;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			>view:nth-child(1){
				width: 32rpx;
				height: 32rpx;
				>image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			>view:nth-child(2){
				margin-left: 10rpx;
				font-size: 28rpx;
				font-family: "PingFang SC";
				font-weight: 500;
				color: #FFFFFF;
				line-height: 33rpx;
			}
		}
		.verification{
			background-color: #0CB596;
			margin: 30rpx 0;
		}
		.Intelligentize{
			background-color: #FFFFFF;
			margin-bottom: 30rpx;
			>view:nth-child(2){
				color: #0CB596;
			}
		}
	}
	// 添加看板
	.boardPopup{
		width: 686rpx;
		height: 500rpx;
		background-color: #fff;
		border-radius: 48rpx;
		box-sizing: border-box;
		padding: 40rpx;
		font-family: "PingFang SC";
		>view:nth-child(1){
			font-size: 35rpx;
			font-weight: 600;
			color: #333333;
			line-height: 35rpx;
		}
		>view:nth-child(2){
			height: 2rpx;
			background: #D9D9D9;
			margin: 30rpx 0;
		}
		>view:nth-child(3){
			font-size: 31rpx;
			font-weight: 500;
			color: #333333;
			line-height: 55rpx;
			margin-bottom: 20rpx;
		}
		>view:nth-child(4){
			height: 87rpx;
			border-radius: 17rpx 17rpx 17rpx 17rpx;
			opacity: 1;
			border: 2rpx solid #808080;
			box-sizing: border-box;
			padding-left: 20rpx;
			>input{
				height: 87rpx;
				line-height: 87rpx;
			}
		}
		>view:nth-child(5){
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			>view{
				width: 280rpx;
				height: 87rpx;
				line-height: 87rpx;
				text-align: center;
				border-radius: 43rpx 43rpx 43rpx 43rpx;
				border: 2rpx solid #999999;
				font-size: 31rpx;
				font-family: "PingFang SC";
				font-weight: 400;
			}
			>view:nth-child(1){
				border: 2rpx solid #999999;
				color: #666666;
			}
			>view:nth-child(2){
				border: none;
				background-color: #24458E;
				color: #fff;
			}
		}
	}
	// 数据核验
	.verify{
		width: 686rpx;
		height: 500rpx;
		background-color: #fff;
		border-radius: 48rpx;
		box-sizing: border-box;
		padding: 40rpx;
		font-family: "PingFang SC";
		>view:nth-child(1){
			font-size: 35rpx;
			font-weight: 600;
			color: #333333;
			line-height: 35rpx;
		}
		>view:nth-child(2){
			height: 2rpx;
			background: #D9D9D9;
			margin: 30rpx 0;
		}
		.setCheckbox{
			/deep/.uni-data-checklist .checklist-group .checklist-box.is--list.is-checked .checklist-text {
				font-size: 31rpx;
				font-family: "PingFang SC";
				font-weight: 400;
				color: #333333;
				line-height: 36rpx;
			}
			/deep/.uni-data-checklist .checklist-group .checklist-box.is--list.is-list-border {
				border: none;
			}
		}
		>view:nth-child(4){
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			>view{
				width: 280rpx;
				height: 87rpx;
				line-height: 87rpx;
				text-align: center;
				border-radius: 43rpx 43rpx 43rpx 43rpx;
				border: 2rpx solid #999999;
				font-size: 31rpx;
				font-family: "PingFang SC";
				font-weight: 400;
			}
			>view:nth-child(1){
				border: 2rpx solid #999999;
				color: #666666;
			}
			>view:nth-child(2){
				border: none;
				background-color: #24458E;
				color: #fff;
			}
		}
	}
	.compileData{
		width: 686rpx;
		height:auto;
		background-color: #fff;
		border-radius: 48rpx;
		box-sizing: border-box;
		padding: 40rpx;
		font-family: "PingFang SC";
		>view:nth-child(1){
			font-size: 35rpx;
			font-weight: 600;
			color: #333333;
			line-height: 35rpx;
		}
		>view:nth-child(2){
			height: 2rpx;
			background: #D9D9D9;
			margin-top: 30rpx;
		}
		.compileBox{
			.compileBoxItem{
				margin-top: 20rpx;
				>view:nth-child(1){
					font-size: 31rpx;
					font-family:"PingFang SC";
					font-weight: 500;
					color: #333333;
				}
				>view:nth-child(2){
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					>view:nth-child(1){
						>input{
							width: 540rpx;
							height: 87rpx;
							border-radius: 17rpx;
							border: 2rpx solid #808080;
							padding-left: 20rpx;
							box-sizing: border-box;
						}
					}
					>view:nth-child(2){
						width: 52rpx;
						height: 52rpx;
						>image{
							width: 100%;
							height: 100%;
							display: block;
						}
					}
				}
			}
		}
		.addCompileBoxItem{
			margin-top: 40rpx;
			>view{
				width: 100%;
				height: 87rpx;
				background: #24458E;
				border-radius:43rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				>view:nth-child(1){
					width: 32rpx;
					height: 32rpx;
					>image{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				>view:nth-child(2){
					margin-left: 10rpx;
					font-size: 28rpx;
					font-family: "PingFang SC";
					font-weight: 500;
					color: #FFFFFF;
					line-height: 33rpx;
				}
			}
		}
		.setcompileBtn{
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			>view{
				width: 280rpx;
				height: 87rpx;
				line-height: 87rpx;
				text-align: center;
				border-radius: 43rpx 43rpx 43rpx 43rpx;
				border: 2rpx solid #999999;
				font-size: 31rpx;
				font-family: "PingFang SC";
				font-weight: 400;
			}
			>view:nth-child(1){
				border: 2rpx solid #999999;
				color: #666666;
			}
			>view:nth-child(2){
				border: none;
				background-color: #24458E;
				color: #fff;
			}
		}
	}
</style>